<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现动态设置页面的宽度和高度</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
.w960 {
  width: 960px;
  height: 600px;
  border: 1px solid #99F;
  background: #99F;
}

.w1200 {
	width: 1200px;
	height: 800px;
	border: 1px solid #FCF;
	background: #FCF;	
}
</style>

<script>
function windowMedia(){
  /*var winWidth = $(window).width();*/
	var winWidth = (screen.width);
	if (winWidth<=1024) {
		$("#content").addClass("w960");
		$("#content").removeClass("w1200");
		$("#content").text("960×600");
	}else {
		$("#content").addClass("w1200");
		$("#content").removeClass("w960")
		$("#content").text("1200×800");
	};
  }
$(document).ready(function(){
	windowMedia();
});
</script>

</head>

<body>
<div id="content" style="text-align: center;margin-right: auto;	margin-left: auto;"></div>
</body>
</html>
